<template>
	<div v-if="showHelper">
		<div class="theme-bar-setting">
			<div @click="drawerVisible=true">
				<vab-remix-icon icon="information-line" style="font-size: 20px;" />
				<p>{{lan.title}}</p>
			</div>
		</div>

		<el-drawer :title="lan.openTitle" :visible.sync="drawerVisible" direction="rtl" append-to-body size="310px">
			<el-scrollbar style="height: 94vh; overflow: hidden">
				<div class="form-container" v-for="item in info">
					<h5 v-if="!!item.remark"></h5>
					<p v-html="replaceN(item.remark)"></p>
					<h5 v-if="!!item.getList"></h5>
					<el-button v-if="!!item.getList" @click="btnGetList(item)">自动测试查询</el-button>
					<h5 v-if="!!item.save"></h5>
					<el-button v-if="!!item.save" @click="btnSave(item)">自动填充表单</el-button>
				</div>
			</el-scrollbar>
		</el-drawer>
	</div>
</template>

<script>
	import helperJs from "@/common/helper/helper.js";
	import common from "@/common/common.js";

	export default {
		methods: {
			btnGetList(item) {
				if (this.info.length == 0 || item == null) {
					this.drawerVisible = false;
					return;
				}
				//查询
				if (item.getList == null) return;
				var app = window[this.$route.path];
				if (app == null) return;
				var getListName = item.getListName;
				var getListSearch = item.getListSearch;
				var timeout = item.timeout;
				if (!getListSearch) getListSearch = "search";
				if (!getListName) getListName = "getList";
				if (timeout == null || timeout == 0) timeout = 3000;
				var searchData = app[getListSearch];
				var getListMethod = app[getListName];
				var nameVals = []; //组装集合
				for (var name in searchData) {
					var searchValList = item.getList[name];
					if (searchValList == null) continue;
					if (searchValList.length > 0) {
						for (var i = 0; i < searchValList.length; i++) {
							var searchVal = searchValList[i];
							nameVals.push({
								name: name,
								val: searchVal
							});
						}
					}
				}
				if (nameVals.length == 0) {
					common.showToast("没有赋值js");
					return;
				}
				common.showToast("自动查询开始执行", "success");
				this.drawerVisible = false;
				this.doSearch(nameVals, app, getListSearch, getListMethod, timeout, 0);
			},
			doSearch(nameVals, app, getListSearch, getListMethod, timeout, index) {
				if (nameVals.length <= index) {
					this.doSearchComplete(app, getListSearch, getListMethod);
					return;
				}
				var nameVal = nameVals[index];
				app.resetVal(getListSearch);
				app[getListSearch][nameVal.name] = nameVal.val; //searchData不行,app[getListSearch]就行
				//console.log("执行重置表单,赋值,再查询", name, searchVal, searchData, getListMethod);
				getListMethod();
				setTimeout(() => {
					index = index + 1;
					this.doSearch(nameVals, app, getListSearch, getListMethod, timeout, index);
				}, timeout);
			},
			doSearchComplete(app, getListSearch, getListMethod) {
				app.resetVal(getListSearch);
				getListMethod();
				common.showToast("自动查询执行完成", "success");
			},
			btnSave(item) {
				if (this.info.length == 0 || item == null) {
					this.drawerVisible = false;
					return;
				}
				//表单
				if (item.save == null) return;
				var app = window[this.$route.path];
				if (app == null) return;
				var saveModel = item.saveModel;
				var saveName = item.saveName;
				if (!saveModel) saveModel = "model";
				if (!saveName) saveName = "save";
				var modelData = app[saveModel];
				var saveMethod = app[saveName];
				//重置表单
				app.resetVal(saveModel);
				for (var name in modelData) {
					var modelValList = item.save[name];
					if (modelValList == null) continue;
					if (modelValList.length > 0) {
						var valList = [];
						for (var i = 0; i < modelValList.length; i++) {
							var modelVal = modelValList[i];
							valList.push(modelVal);
						}
						//随机取值
						var index = common.tool.randomNum(0, valList.length - 1);
						app[saveModel][name] = valList[index]; //searchData不行,app[getListSearch]就行
					}
				}
				this.drawerVisible = false;
				common.showToast("表单填写完毕", "success");
			},
			replaceN(str) {
				if (str == null) return "";
				var r = str.replace(/\n/g, "<br/>");
				return r;
			}
		},
		name: "helper",
		computed: {
			showHelper() {
				return this.$store.state.showHelper && (this.info.length > 0);
			},
			lan() {
				var lang = this.$store.state.language;
				var path = "helper";
				var r = lang[path];
				if (r == null) return {};
				return r;
			}
		},
		watch: {
			//监听,当路由发生变化的时候执行
			$route: {
				handler: function(val, oldVal) {
					var path = val.path;
					var obj = helperJs[path];
					if (obj == null) {
						this.info = [];
						return;
					}
					this.info = obj;
				},
				// 深度观察监听
				deep: true
			}
		},
		data: function() {
			return {
				drawerVisible: false,
				info: []
			};
		}
	}
</script>

<style scoped="scoped">
	.theme-bar-setting {
		position: fixed;
		right: 0;
		z-index: 999;
		width: 60px;
		min-height: 60px;
		text-align: center;
		cursor: pointer;
		background: #41b584;
		color: white;
		border-radius: 2px;
		top: calc((100vh - 110px) / 2);
	}

	.theme-bar-setting div {
		padding-top: 10px;
	}

	.theme-bar-setting p {
		padding-top: 0px;
		margin: 5px;
	}
</style>
